import React, { Component } from 'react'

export default class Homepage extends Component {
  render() {
    return (
      <div className={`rt-Homepage-container`}>
        <header>
          <div className={`-wrapper`}>
            <img alt="logo" src={require('static/images/logo.png')} />
            <nav className={`nav`}>
              <div>
                <i>i</i>
                <span>交易</span>
              </div>
              <div>
                <i>i</i>
                <span>财经</span>
              </div>
              <div className={`-highlight`}>
                <i>i</i>
                <span>交收</span>
              </div>
              <div>
                <i>i</i>
                <span>帮助</span>
              </div>
              <div>
                <i>i</i>
                <span>账户</span>
              </div>
            </nav>
          </div>
        </header>

        <div className={`-body-content`}>
          <div className={`-wrapper`}>
            <nav>
              <div className={`-rest`}>
                <div className={`rt-account-box`}>
                  <img alt="avatar" src={require('static/images/avatar.png')} />
                  <div className={`-middle-side`}>
                    <div className={`-above`}>
                      <span className={`-phone-number`}>130****7893</span>
                      <img alt="auth?" src={require('static/images/auth.png')} />
                    </div>
                    <strong>余额：3,686.90元</strong>
                  </div>
                  <div className={`-right-side`}>
                    <i>i</i>
                    <span>退出</span>
                  </div>
                </div>
                <div className={`cm-scrollable-container`}>
                  <div className={`rt-nav-title`}>交收账户</div>
                  <div className={`rt-nav-title -active`}>交收列表</div>
                  <div className={`rt-nav-title`}>收货信息</div>
                  {
                    Array(10).fill(1).map((v, i) => (
                      <div key={i} className={`rt-nav-title`}>收货信息</div>
                    ))
                  }
                </div>
              </div>
              <img alt="qr-code" className={`-qr-code`} src={require('static/images/qr-code.png')} />
            </nav>
            <div className={`-main-box`}>
              <h3>交收订单</h3>
              <div className={`-separate-2-line`}></div>
              <div className={`rt-order-box`}>
                <div className={`-row`}>
                  <span>订单号：</span>
                  <div className={`-right-side`}>
                    <strong>100012345</strong>
                  </div>
                </div>
                <div className={`-row`}>
                  <span>收货信息：</span>
                  <div className={`-right-side`}>
                    <span>收货信息：</span>
                    <span className={`-phone-number`}>133****5678</span>
                    <span>上海市长宁区大宝路133号202室</span>
                  </div>
                </div>
                <div className={`-row`}>
                  <span>交收时间：</span>
                  <div className={`-right-side`}>
                    <time>2016 04-19 18:44:11</time>
                  </div>
                </div>
                <div className={`-row`}>
                  <span>订单状态：</span>
                  <div className={`-right-side`}>
                    <span>等待收货</span>
                  </div>
                </div>
                <div className={`-row -pt`}>
                  <span>物流信息：</span>
                  <div className={`-right-side`}>
                    <span className={`-sm-font`}>得帮物流</span>
                    <span className={`-diff-font`}>4900 2387 4983</span>
                  </div>
                </div>
                <div className={`-row -adjust`}>
                  <span></span>
                  <div className={`-right-side`}>
                    {
                      Array(29).fill(1).map((v, i) => (
                        <div key={Math.random()} className={`-step-info`}>
                          <span>货物到达【上海】，正在派送中</span>
                          <time>2017-02-12</time>
                        </div>
                      ))
                    }
                  </div>
                </div>
                <div className={`-row`}>
                  <span></span>
                  <div className={`-right-side`}>
                    <span className={`cm-op-btn`}>返回</span>
                  </div>
                </div>
              </div>
              <p>查看我的交收列表   ｜   跳转到历史交易</p>
            </div>
          </div>
        </div>
        <footer>© 2016 金欢信息 版权所有</footer>
      </div>
    )
  }
}